<template>
  <div class="poput_box">
    <div class="bg">
      <!-- 添加部门 -->
      <div class="bg_poput">
        <el-dialog title="添加部门" :visible.sync="dialogFormVisible">
          <el-form :rules="xinForm" :model="form">
            <el-form-item prop="name" label="部门名称:" :label-width="formLabelWidth">
              <el-input v-model="form.name" autofocus="true" />
            </el-form-item>
            <el-form-item prop="tex" label="部门职责:" :label-width="formLabelWidth">
              <el-input class="textarea" rows="5" type="textarea" v-model="form.tex" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addClick()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 编辑部门 -->
      <div class="bg_poput">
        <el-dialog title="编辑部门" :visible.sync="dialogFormVisibleb">
          <el-form :rules="xinForm" :model="form">
            <el-form-item prop="name" label="部门名称:" :label-width="formLabelWidth">
              <el-input v-model="form.name" autofocus="true" :placeholder="placeholderName" />
            </el-form-item>
            <el-form-item prop="tex" label="部门职责:" :label-width="formLabelWidth">
              <el-input class="textarea" rows="5" type="textarea" v-model="form.tex" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleb = false">取 消</el-button>
            <el-button type="primary" @click="bianClick()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="da">
        <TitleBar title="部门管理" refresh />
        <div class="conten">
          <div class="top">
            <p class="dat">数据列表</p>
            <div class="dat_rig">
              <el-form ref="form" :model="form" label-width="80px">
                <div class="data_a">
                  <el-form-item>
                    <template>
                      <el-select v-model="val" placeholder="显示条数" @change="getValNum">
                        <el-option
                          v-for="item in options_a"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </template>
                  </el-form-item>
                </div>
                <el-form-item>
                  <template>
                    <el-select v-model="value" placeholder="排序方式" @change="getVal">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-form-item>
                <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
              </el-form>
            </div>
          </div>
          <div class="fu_tatal">
            <el-table
              :data="xinList"
              :header-cell-style="{
                'height':'56px',
                'background':'#F2F2F2',
              }"
            >
              <el-table-column label="部门名称" align="center">
                <template slot-scope="scope">
                  <span style="display:block;text-align:center;">{{ scope.row.departmentName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="职能描述" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <span style="display:block;text-align:center;">{{ scope.row.remark }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="成员数量" align="center">
                <template slot-scope="scope">
                  <span style="display:block;text-align:center;">{{ scope.row.peoCount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="添加时间" align="center">
                <template slot-scope="scope">
                  <span style="display:block;text-align:center;">{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="是否启动" align="center">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    @change="getSwith(scope.row.code,scope.row.status)"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <span
                    style="color:#488DFF"
                    @click="redact(scope.$index, scope.row.code,scope.row.departmentName)"
                  >权限设置</span>
                  <span
                    style="padding:0 10px;color:#488DFF;"
                    @click="bianji(scope.$index, scope.row),dialogFormVisibleb = true"
                  >编辑</span>
                  <span style="color:red;" @click="handleDelete(scope.$index, scope.row)">删除</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pages">
      <pagination :pagination="pagination1" @changepage="getList" />
    </div>
  </div>
</template>
<script>
import {
  getSection,
  delSection,
  addSection,
  bianSection,
  getSwitchA
} from "@/api/jurisdiction.js";
export default {
  data() {
    return {
      value3: false,
      pagination1: {},
      options: [
        {
          value: "desc",
          label: "降序"
        },
        {
          value: "asc",
          label: "升序"
        }
      ],
      options_a: [
        {
          value: "5",
          label: "5"
        },
        {
          value: "10",
          label: "10"
        }
      ],
      value: "",
      val: "",
      pageSize:5,
      zid: "",
      code: "",
      desc: false,
      reg: "",
      dataList: [],
      xinList: [],
      delId: "",
      statu: true,
      placeholderName: "",
      placeholderZhi: "",
      currentPage: 1,
      pageNum: 1,
      dataTotal: "",
      xinList: [],
      dialogFormVisible: false,
      dialogFormVisibleb: false,
      formLabelWidth: "120px",
      form: {
        name: "",
        tex: ""
      },
      xinForm: {
        name: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{4,30}$/.test(value) == false) {
                callback(new Error("部门名称由4-30位中文组成"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        tex: [
          { required: true, message: "请输入部门职责", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{4,30}$/.test(value) == false) {
                callback(new Error("部门职责由4-30位中文组成"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 是否启动
    getSwith(code, val) {
      getSwitchA({
        code: code,
        status: val == true ? 1 : 0
      }).then(res => {
        if(res.code==200){
          this.$message({
            message: "修改成功！",
            type: "success"
          });
        }else{
            this.$message.error("修改失败！");
        }
      });
    },
    // 显示条数
    getValNum() {
      getSection({
        pageNum: this.pageNum,
        pageSize: this.val
      }).then(res => {
        this.dataList = res.data;
        this.xinList = this.dataList.list;
        if (res.code == 200) {
          this.$message({
            message: "修改成功！",
            type: "success"
          });
        }
      });
    },
    // 升降序
    getVal() {
       getSection({
        pageNum:1,
        desc: this.value,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data;
        this.pagination1 = res.data;
        this.xinList = this.dataList.list;
        for (let i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].status == 1) {
            res.data.list[i].status = true;
          } else {
            res.data.list[i].status = false;
          }
        }
      });
    },
    // 删除单行
    handleDelete(index, row) {
      this.$confirm("确认删除部门吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.idx = index;
        this.delId = row.id;
        delSection([this.delId]).then(res => {
          if (res.data) {
            this.getList();
            this.$message({
              message: "删除成功！",
              type: "warning"
            });
          }
        });
      });
    },
    // 添加数据
    addClick() {
      if (this.form.name !== ''&& !this.form.tex !== ''||this.form.name.length > 1 && this.form.tex.length > 1) {
          const department = {
            departmentName: this.form.name,
            remark: this.form.tex
          };
          addSection(department).then(res => {
            if (res.code == 200) {
              this.getList();
              this.form.name = "";
              this.form.tex = "";
              this.$message({
                message: "添加成功！",
                type: "success"
              });
              this.dialogFormVisible = false;
            } else {
              this.$message.error("添加失败！");
              this.form.name = "";
              this.form.tex = "";
              this.dialogFormVisible = true;
            }
          });
      } else {
        this.$message({
          message: "添加信息不允许为空或长度应大于等于2",
          type: "warning"
        });
      }
    },
    // 点击获取编辑数据
    bianji(idx, row) {
      this.form.name = row.departmentName;
      this.form.tex = row.remark;
      this.zid = row.id;
      this.code = row.code;
    },
    // 编辑数据
    bianClick() {
      if (this.form.name !== ''&& !this.form.tex !== ''||this.form.name.length > 3 && this.form.tex.length > 3) {
        const department = {
          id: this.zid,
          departmentName: this.form.name,
          remark: this.form.tex,
          code: this.code
        };
        bianSection(department).then(res => {
          if (res.code == 200) {
            this.getList();
            this.form.tex = "";
            this.form.name = "";
            this.$message({
              message: "修改成功！",
              type: "success"
            });
            this.dialogFormVisibleb = false;
          }
        });
      } else {
        this.$message({
          message: "添加信息不允许为空",
          type: "warning"
        });
        this.dialogFormVisibleb = true;
      }
    },
    // 初始化数据
    getList(pageNum = 1) {
      getSection({
        pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data;
        this.pagination1 = res.data;
        this.xinList = this.dataList.list;
        for (let i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].status == 1) {
            res.data.list[i].status = true;
          } else {
            res.data.list[i].status = false;
          }
        }
      });
    },

    // 点击跳转页面
    redact(idx, code, name) {
      this.$router.push({
        name: `department`,
        query: {
          code,
          name
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.poput_box {
  padding: 0 144px 0 22px;
  .bg_poput {
    .el-dialog__header {
      height: 54px;
      line-height: 54px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .el-form {
      padding-left: 220px;
      .el-input {
        width: 203px;
      }
      .textarea {
        width: 203px;
      }
    }
    .el-dialog__footer {
      .dialog-footer {
        text-align: center;
      }
    }
  }
  .conten {
    padding: 11px 23px 80px 30px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 4px;
    .top {
      height: 50px;
      .dat {
        margin: 0;
        float: left;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
      }
      .dat_rig {
        width: 700px;
        text-align: right;
        float: right;
        .el-form-item {
          float: left;
        }
      }
    }
    .el-table th,
    .el-table tr {
      height: 60px;
    }
  }
}
</style>
